<template>
	<view class="account-platform-container">
		<!-- 页面标题 -->
		<!-- <view class="page-header">
			<text class="page-title">账号详情</text>
		</view> -->

		<!-- 账号基本信息区域 -->
		<view class="account-info-section">
			<view class="section-title">账号基本信息</view>
			<view class="info-content">
				<view class="info-item">
					<view class="info-label">用户名</view>
					<view class="info-value" @click="copyToClipboard(account_data.phone)">{{ account_data.username || '-' }}</view>
				</view>
				<view class="info-item">
					<view class="info-label">密码</view>
					<view class="info-value password-value">
						<text>{{ account_data.password || '-' }}</text>
						<u-button style="margin-left: 8rpx;" type="primary" size="mini"
							@click="copyToClipboard(account_data.password)">{{ copyStatus }}</u-button>
					</view>
				</view>
				<view class="info-item">
					<view class="info-label">手机号</view>
					<view class="info-value" @click="copyToClipboard(account_data.phone)">{{ account_data.phone || '-' }}</view>
				</view>
				<view class="info-item">
					<view class="info-label">余额</view>
					<view class="info-value balance-value">
						<components_account_balance @balance-updated="balance_updated" :account_id="account_data.account_id" :balance="account_data.balance"></components_account_balance>
					</view>
				</view>
				<view class="info-item">
					<view class="info-label">账号ID</view>
					<view class="info-value account-id" @click="copyToClipboard(account_data.account_id)">
						{{ account_data.account_id || '-' }}
						<text v-if="account_data.account_id"
							style="font-size: 24rpx; color: #999999; margin-left: 8rpx;">点击复制</text>
					</view>
				</view>
				<view class="info-item">
					<view class="info-label">创建时间</view>
					<view class="info-value">{{ account_data.create_time || '-' }}</view>
				</view>
				<view class="info-item">
					<view class="info-label">更新时间</view>
					<view class="info-value">{{ account_data.update_time || '-' }}</view>
				</view>
			</view>
		</view>

		<!-- 创建者信息区域 -->
		<view class="creator-section">
			<view class="section-title">创建者信息</view>
			<view class="info-content">
				<template v-if="account_data.create_by && Object.keys(account_data.create_by).length > 0">
					<view class="user-info-header">
						<view class="avatar-container">
							<u-image fade duration="450" mode="widthFix" shape="circle"
								:src="SERVER_BASE_URL + getImagePath(account_data.create_by.avatar)">
								<template #error>
									<view style="font-size: 24rpx;">加载失败</view>
								</template>
								<template #loading>
									<u-loading></u-loading>
								</template>
							</u-image>
						</view>
						<view class="user-basic-info">
							<view class="user-name">{{ account_data.create_by?.username || '-' }}</view>
							<view class="user-role">{{ account_data.create_by?.role?.message || '-' }}</view>
						</view>
						<view class="user-status"
							:class="{'status-active': account_data.create_by?.status?.code === 1}">
							{{ account_data.create_by?.status?.message || '-' }}
						</view>
					</view>
				</template>
				<template v-else>
					<view class="empty-user-info">
						<view class="empty-avatar">
							<text class="empty-icon">👤</text>
						</view>
						<view class="empty-text">暂无创建者信息</view>
					</view>
				</template>
			</view>
		</view>

		<!-- 当前所有者信息区域 -->
		<view class="owner-section">
			<view class="section-title">当前所有者信息</view>
			<view class="info-content">
				<template v-if="account_data.current_owner && Object.keys(account_data.current_owner).length > 0">
					<view class="user-info-header">
						<view class="avatar-container">
							<u-image fade duration="450" mode="widthFix" shape="circle"
								:src="SERVER_BASE_URL + getImagePath(account_data.current_owner.avatar)">
								<template #error>
									<view style="font-size: 24rpx;">加载失败</view>
								</template>
								<template #loading>
									<u-loading></u-loading>
								</template>
							</u-image>
						</view>
						<view class="user-basic-info">
							<view class="user-name">{{ account_data.current_owner?.username || '-' }}</view>
							<view class="user-role">{{ account_data.current_owner?.role?.message || '-' }}</view>
						</view>
						<view class="user-status"
							:class="{'status-active': account_data.current_owner?.status?.code === 1}">
							{{ account_data.current_owner?.status?.message || '-' }}
						</view>
					</view>
				</template>
				<template v-else>
					<view class="empty-user-info">
						<view class="empty-avatar">
							<text class="empty-icon">👤</text>
						</view>
						<view class="empty-text">暂无所有者信息</view>
					</view>
				</template>
			</view>
			<!-- account_data.current_owner !== null ||  -->
			<u-button v-if="showDeleteOwnerButton()" type="error" size="medium"
				@click="showDeleteOwnerModal">解除账号所有权</u-button>
		</view>

		<!-- 平台信息区域 -->
		<view class="platform-section">
			<view class="section-title">
				<u-text text="平台注册信息"></u-text>
				<view>
					<u-button type="primary" v-show="UserInfo.role.code == 1" size="mini" @click="fetchPlatformData"
					style="margin-left: 20rpx;">刷新</u-button>
					<u-button type="primary" v-show="UserInfo.role.code == 1" size="mini" @click="navigateToPlatformAssign"
					style="margin-left: 20rpx;">注册平台</u-button>
				</view>

			</view>
			<view class="info-content">
				<!-- 加载状态 -->
				<view v-if="loading_platform" class="loading-state">
					<u-loading></u-loading>
					<text style="margin-left: 20rpx; font-size: 28rpx; color: #666666;">正在获取平台信息...</text>
				</view>

				<!-- 错误状态 -->
				<view v-else-if="platform_error" class="error-state">
					<text style="font-size: 28rpx; color: #ff6b6b;">{{ platform_error }}</text>
					<u-button style="margin-top: 20rpx;" type="primary" size="mini"
						@click="fetchPlatformData()">重新加载</u-button>
				</view>

				<!-- 无数据状态 -->
				<view v-else-if="platform_loaded && platform_data.length === 0" class="empty-state">
					<text style="font-size: 28rpx; color: #999999;">暂无平台注册信息</text>
				</view>

				<!-- 平台列表 -->
				<view v-else class="platform-list">
					<!-- 平台统计信息和操作按钮 -->
					<view class="platform-stats" v-if="platform_data.length > 0">
						<text style="font-size: 26rpx; color: #666666;">
							共 {{ platform_data.length }} 个平台，
							正常 {{ platform_data.filter(p => p.status?.code === 1).length }} 个，
							已认证 {{ platform_data.filter(p => p.platform_accounts.is_real_name).length }} 个
						</text>
					</view>



					<view v-for="(platform, index) in platform_data" :key="platform.platform_id || index"
						class="platform-item platform-item-hover">
						<view class="platform-header">
							<view style="display: flex; align-items: center; flex: 1;">
								<!-- 平台Logo -->
								<view v-if="platform.logo" class="platform-logo">
									<u-image fade duration="450" mode="aspectFit" :src="platform.logo"
										style="width: 60rpx; height: 60rpx; border-radius: 12rpx;">
										<template #error>
											<view
												style="width: 60rpx; height: 60rpx; background-color: #f0f0f0; border-radius: 12rpx;">
											</view>
										</template>
									</u-image>
								</view>
								<!-- 平台名称 -->
								<view class="platform-name" style="margin-left: 16rpx;">
									{{ platform.name || '-' }}
								</view>
							</view>
							<!-- 平台状态 -->
							<view @click="platform_status_show(platform)" class="platform-status" :class="getPlatformStatusClass(platform.platform_accounts.status?.code)">
								{{ platform.platform_accounts.status.message || '-' }}
							</view>
						</view>
						<view class="platform-info">
							<view class="platform-info-item">
								<text class="platform-info-label">平台ID：</text>
								<text class="platform-info-value platform-id"
									@click="copyToClipboard(platform.platform_id)">
									{{ platform.platform_id || '-' }}
									<text v-if="platform.platform_id" class="copy-hint">点击复制</text>
								</text>
							</view>
							<view class="platform-info-item">
								<text class="platform-info-label">实名认证：</text>
								<text @click="show_is_real_name_hover_modelfn(platform)" class="platform-info-value"
									:class="{'real-name-yes': platform.platform_accounts.is_real_name, 'real-name-no': !platform.platform_accounts.is_real_name}">
									{{ platform.platform_accounts.is_real_name ? '已认证' : '未认证' }}
								</text>
							</view>
							<!-- 网站链接 -->
							<view v-if="platform.website && platform.website.trim()" class="platform-info-item">
								<text class="platform-info-label">官方网站：</text>
								<text class="platform-info-value platform-website"
									@click="copyToClipboard(platform.website)">
									{{ platform.website.trim() }}
								</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-toast ref="uToastRef" />
		<u-modal show-cancel-button cancel-text="我在想想" @confirm="releaseAccountOwnership" v-model="delete_owner_model"
			title="确认解除" content="是否确认解除账号所有权？"></u-modal>
		<u-popup :mask-close-able="false" closeable mode="center" border-radius="20"
			v-model="is_real_name_hover_models">
			<view style="padding: 30rpx;">
				<u-form :model="is_real_name_hover_model_form" ref="is_real_name_hover_model_uFormRef">
					<u-form-item prop="real_name" label="姓名"><u-input maxlength="4"
							v-model="is_real_name_hover_model_form.real_name" /></u-form-item>
					<u-form-item prop="id_card" label="身份证号"><u-input maxlength="18" typy="idcard"
							v-model="is_real_name_hover_model_form.id_card" /></u-form-item>
					<view style="display: flex;">
						<u-button :loading="is_real_name_hover_models_loading" type="primary" size="medium" @click="is_real_name_hover">确定</u-button>
					</view>
				</u-form>
			</view>
		</u-popup>
		<u-modal @confirm="set_upload_platform_status" title="更新平台运营状态" show-cancel-button v-model="platform_status_show_model" :content="platform_status_content"></u-modal>
	</view>



</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		getImagePath,
		readLocalStorage
	} from '@/static/js/hub';
	import {
		SERVER_BASE_URL,
		searchAccount,
		get_registered_platforms,
		updateAccount,
		update_real_name,
		upload_platform_status
	} from '@/static/apis/wzry';

	// 响应式数据
	const account_data = ref({});
	const UserInfo = ref(readLocalStorage("userInfo"))
	const copyStatus = ref('复制');
	// 平台数据相关响应式变量
	const platform_data = ref([]);
	const loading_platform = ref(false);
	const platform_error = ref('');
	const platform_status_content = ref('');
	const platform_loaded = ref(false);
	const platform_status_show_model = ref(false);
	const uToastRef = ref(null)
	const delete_owner_model = ref(false)
	const is_real_name_hover_models = ref(false);
	const is_real_name_hover_model_form = ref({
		account_id: "",
		real_name: "",
		id_card: ""
	});
	const is_real_name_hover_model_uFormRef = ref()
	const is_real_name_hover_models_loading = ref(false)

	// 当前选中的平台数据
	const selected_platform = ref({});
	
	
	
	// 自定义模板组件
	import components_account_balance from '@/pages/account_platform/components_account_balance.vue'
	

	// 生命周期钩子
	onLoad(async (options) => {
		try {
			var account = await searchAccount({
				keyword: options.account_id
			});
			if (account.code != 0) {
				uni.showToast({
					title: account.message,
					icon: 'none'
				});
				return;
			}
			console.log("请求结果: ", account);
			// 安全地解析JSON数据
			account_data.value = account.data[0];
			// 获取平台数据
			fetchPlatformData();
		} catch (error) {
			console.error('解析账号数据失败:', error);
			uni.showToast({
				title: error.message || '解析账号数据失败',
				icon: 'none'
			});
		}
	});

	onMounted(() => {
		console.log('账号数据:', account_data.value);
	});
	function platform_status_show(platform) {
		
		if(platform.platform_accounts.status.code == 1) {
			platform_status_content.value = '是否把平台运营状态设置成封号状态?';
		} else if(platform.platform_accounts.status.code == 2) {
			platform_status_content.value = '是否把平台运营状态设置成正常运营?';
		} else {
			platform_status_content.value = '平台当前状态未知';
		}
		selected_platform.value = platform;
		platform_status_show_model.value = true;
	}

	// 是否显示解除所有权按钮
	function showDeleteOwnerButton() {
		console.log("是否显示解除所有权按钮", account_data.value);

		if (account_data.value.current_owner == null) {
			return false;
		}
		if (UserInfo.value.role.code == 1) {
			return true;
		}
		return false;
	};

	// 显示确认解除弹窗
	const showDeleteOwnerModal = () => {
		delete_owner_model.value = true;
	}

	// 解除账号所有权的函数
	const releaseAccountOwnership = async () => {
		try {
			console.log(account_data.value.current_owner.user_id);
			const response = await updateAccount({
				account_id: account_data.value.account_id,
				delete_owner: "true"
			});

			// 检查响应状态
			if (response.code === 0) {
				uToastRef.value.show({
					title: '解除成功',
					type: 'success',
				})
				// 更新本地数据
				account_data.value.current_owner = response.data.current_owner;
				// 刷新平台数据
				fetchPlatformData();
			} else {
				platform_error.value = response.message || '解除账号所有权失败';
				uToastRef.value.show({
					title: response.message,
					type: 'error',
				})
			}
		} catch (error) {
			console.error('解除账号所有权失败:', error);
			uToastRef.value.show({
				title: error.message || '解除账号所有权失败',
				type: 'error',
			})
		} finally {
			// 隐藏加载状态
			loading_platform.value = false;

		}
	}

	// 获取平台数据的函数
	/**
	 * 获取并处理平台数据
	 * @param {number} retryCount - 当前重试次数
	 * @param {number} maxRetries - 最大重试次数
	 */
	const fetchPlatformData = async (retryCount = 0, maxRetries = 2) => {
		// 检查是否有account_id
		if (!account_data.value.account_id) {
			platform_error.value = '账号ID不存在，无法获取平台信息';
			platform_loaded.value = true;
			return;
		}

		// 设置加载状态
		loading_platform.value = true;
		platform_error.value = '';

		try {
			// 添加超时处理
			const timeoutPromise = new Promise((_, reject) => {
				setTimeout(() => reject(new Error('请求超时，请检查网络连接')), 10000);
			});

			// 使用Promise.race处理超时
			const response = await Promise.race([
				get_registered_platforms({
					account_id: account_data.value.account_id
				}),
				timeoutPromise
			]);

			// 检查响应是否存在
			if (!response) {
				throw new Error('服务器未返回响应数据');
			}

			// 检查响应格式
			if (typeof response !== 'object') {
				throw new Error('服务器返回格式错误');
			}

			// 检查状态码
			if (response.code === 0) {
				// 检查数据是否存在
				if (!response.data) {
					platform_data.value = [];
					console.warn('响应成功但无数据');
				} else {
					// 检查platform字段 - 新的数据结构
					console.log(response.data.platform);

					if (Array.isArray(response.data.platform)) {
						platform_data.value = response.data.platform
					} else {
						platform_data.value = [];
						console.warn('platform不是数组');
					}
				}
			} else {
				// 根据错误码给出不同的提示
				const errorMessage = response.message || `请求失败，错误码: ${response.code}`;
				throw new Error(errorMessage);
			}
		} catch (error) {
			console.error('获取平台数据出错:', error);
			platform_error.value = error.message || '获取平台数据时发生错误';

			// 重试逻辑
			if (retryCount < maxRetries && error.message !== '账号ID不存在，无法获取平台信息') {
				retryCount++;
				console.log(`第${retryCount}次重试获取平台数据...`);

				// 延迟重试
				await new Promise(resolve => setTimeout(resolve, 1000 * retryCount));
				return fetchPlatformData(retryCount, maxRetries);
			}

			// 添加模拟数据以便展示 - 符合新的数据结构
			platform_data.value = [{
					platform_id: 'a75c799a-029d-4f10-b64f-a877b8b9d774',
					platform_name: '代练通',
					status: {
						code: 1,
						message: '正常'
					},
					is_real_name: true,
					create_time: '2025-11-22 10:04:45',
					update_time: '2025-11-22 10:04:45',
					logo: 'https://img001.dailiantong.com.cn/avatar.png',
					website: 'https://m.dailiantong.com/#/pages/person/person'
				},
				{
					platform_id: 'b86d800b-039e-5g11-c75g-b988c9c0e885',
					platform_name: '游戏平台B',
					status: {
						code: 0,
						message: '禁用'
					},
					is_real_name: false,
					create_time: '2025-11-23 14:30:00',
					update_time: '2025-11-23 14:30:00',
					logo: '',
					website: ''
				}
			];
		} finally {
			// 更新加载状态
			loading_platform.value = false;
			platform_loaded.value = true;
		}
	};

	// 更新余额
	function balance_updated(e) {
		console.log("最新余额", e);
		account_data.value.balance = e
	}
	
	// 获取平台状态样式类
	/**
	 * 根据状态码返回对应的样式类
	 * @param {number} statusCode - 状态码
	 * @returns {string} 样式类名
	 */
	const getPlatformStatusClass = (statusCode) => {
		if (statusCode === 1) return 'platform-status-active';
		if (statusCode === 0) return 'platform-status-disabled';
		return 'platform-status-other';
	};

	// 跳转到平台分配页面
	/**
	 * 跳转到平台分配页面并传递当前账号数据
	 */
	const navigateToPlatformAssign = () => {
		try {
			// 确保账号数据存在且包含必要信息
			if (!account_data.value || !account_data.value.account_id) {
				uToastRef.value.show({
					message: '账号信息不完整，无法注册平台',
					type: 'error',
					duration: 2000
				});
				return;
			}

			// 构造跳转参数
			const navigateParams = {
				account_data: JSON.stringify(account_data.value)
			};
			console.log("account_data.value", account_data.value);
			

			// 跳转到平台分配页面
			uni.navigateTo({
				url: `/pages/platform_assign/platform_assign?account_id=${account_data.value.account_id}`
			});
		} catch (error) {
			console.error('跳转到平台分配页面失败:', error);
			uToastRef.value.show({
				message: '跳转失败，请稍后重试',
				type: 'error',
				duration: 2000
			});
		}
	};



	// 复制函数
	/**
	 * 复制文本到剪贴板
	 * @param {string} text - 要复制的文本
	 */
	const copyToClipboard = (text) => {
		if (!text) return;

		uni.setClipboardData({
			data: text,
			success: () => {
				uni.showToast({
					title: '复制成功',
					icon: 'success',
					duration: 2000
				});
			},
			fail: () => {
				uni.showToast({
					title: '复制失败',
					icon: 'none',
					duration: 2000
				});
			}
		});
	};

	// 实名认证悬停函数
	/**
	 * 显示实名认证悬停信息
	 * @param {Object} platform - 平台对象
	 */
	const is_real_name_hover = async () => {
		is_real_name_hover_model_form.value.account_id = account_data.value.account_id;
		is_real_name_hover_models_loading.value = true;
		update_real_name(is_real_name_hover_model_form.value).then(res => {
			console.log(res);

			fetchPlatformData()
			uToastRef.value.show({
				title: res.message,
				type: "success"
			});
			is_real_name_hover_model_uFormRef.value.resetFields()
			is_real_name_hover_models.value = false;
		}).catch(error => {
			uToastRef.value.show({
				title: error.message,
				type: "error"
			});
		}).finally(() => {
			is_real_name_hover_models_loading.value = false;
		})

	}
	const show_is_real_name_hover_modelfn = (platform) => {
		console.log(platform);
		if (platform.platform_accounts.is_real_name) {
			uToastRef.value.show({
				title: `已绑定${platform.platform_accounts.real_name}实名,暂不支持修改`,
				type: "success"
			});
			return;
		}
		// is_real_name_hover_model_form.value
		Object.assign(is_real_name_hover_model_form.value, platform)
		is_real_name_hover_models.value = true;
	}
	// 平台状态切换函数
	function set_upload_platform_status() {
		
		upload_platform_status({
			account_id: account_data.value.account_id,
			platform_id: selected_platform.value.platform_id,
			status_code: selected_platform.value.platform_accounts.status.code == 1 ? 2 : 1
		}).then(res => {
			uToastRef.value.show({
				title: res.message,
				type: "success"
			});
			platform_status_show_model.value = false;
			fetchPlatformData()
		}).catch(error => {
			uToastRef.value.show({
				title: error.message,
				type: "error"
			});
		})
	}
	

</script>

<style scoped lang="scss">
	// 主容器样式
	.account-platform-container {
		padding: 20rpx;
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	// 页面标题样式
	.page-header {
		background-color: #ffffff;
		padding: 30rpx 40rpx;
		border-radius: 12rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
	}

	.page-title {
		font-size: 36rpx;
		font-weight: 600;
		color: #333333;
	}

	// 信息区域通用样式
	.account-info-section,
	.creator-section,
	.owner-section {
		background-color: #ffffff;
		border-radius: 12rpx;
		padding: 30rpx 40rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
	}

	.section-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #333333;
		margin-bottom: 20rpx;
		padding-bottom: 16rpx;
		border-bottom: 2rpx solid #eeeeee;
		display: flex;
		justify-content: space-between;
	}

	// 信息内容区域
	.info-content {
		width: 100%;
	}

	// 信息项样式
	.info-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.info-item:last-child {
		border-bottom: none;
	}

	.info-label {
		font-size: 28rpx;
		color: #666666;
		flex: 1;
	}

	.info-value {
		font-size: 28rpx;
		color: #333333;
		flex: 2;
		text-align: right;
		word-break: break-all;
	}

	// 密码值样式
	.password-value {
		gap: 16rpx;
	}



	// 余额值样式
	.balance-value {
		font-size: 32rpx;
		font-weight: 600;
		color: #ff6b6b;
	}

	// 账号ID样式
	.account-id {
		font-size: 26rpx;
		color: #888888;
	}

	// 用户信息头部样式
	.user-info-header {
		display: flex;
		align-items: center;
		padding-bottom: 20rpx;
		margin-bottom: 20rpx;
		border-bottom: 2rpx solid #eeeeee;
	}

	/* 空状态样式 */
	.empty-user-info {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 40rpx 0;
		background-color: #f8f8f8;
		border-radius: 12rpx;
		color: #999;
	}

	.empty-avatar {
		width: 100rpx;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #e5e5e5;
		border-radius: 50%;
		margin-bottom: 20rpx;
	}

	.empty-icon {
		font-size: 48rpx;
	}

	.empty-text {
		font-size: 28rpx;
		color: #999;
	}

	// 头像容器样式
	.avatar-container {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50rpx;
		overflow: hidden;
		background-color: #f0f0f0;
		margin-right: 20rpx;
		flex-shrink: 0;
	}

	// 头像样式
	.avatar {
		width: 100%;
		height: 100%;
	}

	// 用户基本信息样式
	.user-basic-info {
		flex: 1;
	}

	// 用户名样式
	.user-name {
		font-size: 30rpx;
		font-weight: 600;
		color: #333333;
		margin-bottom: 8rpx;
	}

	// 用户角色样式
	.user-role {
		font-size: 26rpx;
		color: #666666;
	}

	// 用户状态样式
	.user-status {
		padding: 6rpx 20rpx;
		border-radius: 20rpx;
		font-size: 24rpx;
		background-color: #e0e0e0;
		color: #666666;
		flex-shrink: 0;
	}

	// 活跃状态样式
	.status-active {
		background-color: #e8f5e8;
		color: #4caf50;
	}

	// 平台信息区域样式
	.platform-section {
		background-color: #ffffff;
		border-radius: 12rpx;
		padding: 30rpx 40rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
	}

	// 加载状态样式
	.loading-state {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 40rpx 0;
	}

	// 错误状态样式
	.error-state {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 40rpx 0;
	}

	// 无数据状态样式
	.empty-state {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 40rpx 0;
	}

	// 平台列表样式
	.platform-list {
		width: 100%;
	}

	// 平台项样式
	.platform-item {
		border: 1rpx solid #f0f0f0;
		border-radius: 12rpx;
		padding: 24rpx;
		margin-bottom: 20rpx;
		background-color: #fafafa;
	}

	.platform-item:last-child {
		margin-bottom: 0;
	}

	// 平台头部样式
	.platform-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
		padding-bottom: 16rpx;
		border-bottom: 1rpx solid #eeeeee;
	}

	// 平台名称样式
	.platform-name {
		font-size: 30rpx;
		font-weight: 600;
		color: #333333;
	}

	// 平台状态样式
	.platform-status {
		padding: 6rpx 20rpx;
		border-radius: 20rpx;
		font-size: 24rpx;
		background-color: #e0e0e0;
		color: #666666;
	}

	// 平台活跃状态样式
	.platform-status-active {
		background-color: #e8f5e8;
		color: #4caf50;
	}

	// 平台禁用状态样式
	.platform-status-disabled {
		background-color: #ffebee;
		color: #f44336;
	}

	// 平台其他状态样式
	.platform-status-other {
		background-color: #fff3e0;
		color: #ff9800;
	}

	// 平台统计信息样式
	.platform-stats {
		margin-bottom: 20rpx;
		padding: 16rpx 0;
		border-bottom: 1rpx solid #eeeeee;
	}

	// 平台网站链接样式
	.platform-website {
		color: #007aff;
		text-decoration: underline;
		cursor: pointer;
		word-break: break-all;
		font-size: 24rpx;

		&:active {
			opacity: 0.7;
		}
	}

	// 平台项点击效果
	.platform-item-hover {
		transition: all 0.3s ease;
	}

	.platform-item-hover:active {
		background-color: #f0f0f0;
		transform: scale(0.98);
	}

	// 平台ID样式
	.platform-id {
		cursor: pointer;
		position: relative;
	}

	// 复制提示样式
	.copy-hint {
		font-size: 22rpx;
		color: #007aff;
		margin-left: 8rpx;
		opacity: 0.7;
	}

	// 平台信息样式
	.platform-info {
		width: 100%;
	}

	// 平台信息项样式
	.platform-info-item {
		display: flex;
		align-items: center;
		margin-bottom: 16rpx;
	}

	.platform-info-item:last-child {
		margin-bottom: 0;
	}

	// 平台信息标签样式
	.platform-info-label {
		font-size: 26rpx;
		color: #666666;
		margin-right: 12rpx;
		min-width: 140rpx;
	}

	// 平台信息值样式
	.platform-info-value {
		font-size: 26rpx;
		color: #333333;
		flex: 1;
	}

	// 实名认证样式 - 已认证
	.real-name-yes {
		color: #4caf50;
		font-weight: 500;
	}

	// 实名认证样式 - 未认证
	.real-name-no {
		color: #ff9800;
		font-weight: 500;
	}

	// 响应式设计
	@media screen and (max-width: 375px) {
		.account-platform-container {
			padding: 16rpx;
		}

		.page-header,
		.account-info-section,
		.creator-section,
		.owner-section,
		.platform-section {
			padding: 24rpx 32rpx;
		}

		.page-title {
			font-size: 34rpx;
		}

		.section-title {
			font-size: 30rpx;
		}

		.info-label,
		.info-value {
			font-size: 26rpx;
		}

		.avatar-container {
			width: 90rpx;
			height: 90rpx;
			border-radius: 45rpx;
		}

		// 平台信息响应式样式
		.platform-item {
			padding: 20rpx;
		}

		.platform-name {
			font-size: 28rpx;
		}

		.platform-status {
			font-size: 22rpx;
			padding: 4rpx 16rpx;
		}

		.platform-info-label {
			font-size: 24rpx;
			min-width: 120rpx;
		}

		.platform-info-value {
			font-size: 24rpx;
		}
	}

	@media screen and (max-width: 320px) {
		.info-item {
			flex-direction: column;
			align-items: flex-start;
			gap: 8rpx;
		}

		.info-value {
			text-align: left;
			width: 100%;
		}

		.password-value {
			justify-content: flex-start;
		}

		.user-info-header {
			flex-wrap: wrap;
		}

		.user-status {
			margin-top: 12rpx;
		}

		// 平台信息响应式样式 - 小屏幕
		.platform-header {
			flex-direction: column;
			align-items: flex-start;
			gap: 12rpx;
		}

		.platform-status {
			margin-top: 8rpx;
		}

		.platform-info-item {
			flex-direction: column;
			align-items: flex-start;
			gap: 4rpx;
		}

		.platform-info-label {
			min-width: auto;
		}
	}
</style>